<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,user-scalable=no" />
        <title>数字华容道</title>
        <link rel="stylesheet" href="./css/reset.css" />
        <link rel="stylesheet" href="./css/index.css" />
        <link rel="stylesheet" href="./css/medis.css" />
    </head>

    <body>
        <div class="wrap">
            <div class="rule-wrap">
                <p><label>游戏规则：</label>从左到右，从上到下，按数字顺序排列复原即算完成。</p>
                <p style="text-decoration: line-through">
                    <label>温馨提示：</label>若出现最后两个数字的位置是对调时，称为无解情况，不可复原。
                </p>
                <p><label>优化2.0：</label>由于存在“逆序数的奇偶性”导致游戏无解，已优化摒弃无解情况。</p>
            </div>
            <p class="time-wrap" id="timerWrap">00:00</p>
            <div class="button-wrap">
                <button onclick="chooseLevel(9)">9宫格</button>
                <button onclick="chooseLevel(16)">16宫格</button>
                <button onclick="chooseLevel(25)">25宫格</button>
            </div>
            <div class="game-wrap" id="gameWrap"></div>
            <div class="button-wrap">
                <button id="startOrPause" onclick="play()">开始</button>
                <button onclick="reset()">重置</button>
            </div>
        </div>

        <div class="dialog-wrap" id="dialogWrap">
            <p id="dialogContent"></p>
            <div class="dialog-buttons">
                <button class="dialog-btn-cancel" onclick="hideDialog()">取消</button>
                <button class="dialog-btn-again" onclick="hideDialog();reset()">再来一局</button>
            </div>
        </div>

        <script src="./js/data.js"></script>
        <script src="./js/index.js"></script>
    </body>
</html>
